<template>
  <div class="app-container">
    <bread parentPathText="投诉建议" currentPathText="投诉建议报表"/>
    <el-form :model="queryParams" :inline="true" label-width="68px">
      <el-form-item label="日期选择">
        <el-date-picker
          v-model="date"
          type="daterange"
          size="mini"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="小区筛选">
        <el-select
          v-model="queryParams.groupVal"
          placeholder="选择小区"
          clearable
          size="small"
          style="width: 260px"
          @change="areaChange"
        >
          <el-option
            v-for="item in groupData"
            :key="item.id"
            :label="item.communityName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态筛选">
        <el-select
          v-model="queryParams.statusVal"
          placeholder="请筛选状态"
          clearable
          size="small"
          style="width: 260px"
          @change="statusChange"
        >
          <el-option
            v-for="item in statusData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="筛选类型">
        <el-select
          v-model="queryParams.type"
          placeholder="选择类型"
          clearable
          size="small"
          style="width: 260px"
          @change="typeChange"
        >
          <el-option
            v-for="item in types"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="queryParams.info"
          placeholder="请输入姓名/电话"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="tableList">
      <el-table-column
        align="center"
        label="投诉人"
        prop="userName"
        min-width="20%"
      />
      <el-table-column
        align="center"
        label="区域"
        prop="communityName"
        min-width="20%"
      />
      <el-table-column
        align="center"
        label="建议内容"
        prop="complaintContent"
        :show-overflow-tooltip="true"
        min-width="20%"
      />
      <el-table-column
        align="center"
        label="协调人员"
        prop="dealUserName"
        min-width="20%"
      />
      <el-table-column
        align="center"
        label="处理状态"
        prop="statusVal"
        min-width="30%"
      />
      <el-table-column
        align="center"
        label="协调结果"
        prop="satisfyStatusVal"
        min-width="15%"
      />
      <el-table-column
        align="center"
        label="投诉时间"
        prop="createDate"
        min-width="15%"
      />
      <el-table-column
        align="center"
        label="操作"
        min-width="25%"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >查看</el-button
          >
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-edit"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加/编辑弹框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      append-to-body
      :before-close="handleClose"
      ref="ruleForm"
    >
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="80px"
      >
      <el-form-item label="投诉人:">
          {{detail.userName}}
       </el-form-item>
      <el-form-item label="区域:">
          {{detail.communityName}}
       </el-form-item>
      <el-form-item label="建议内容:">
          {{detail.complaintContent}}
       </el-form-item>
      <el-form-item label="协调人员:">
          {{detail.dealUserName}}
       </el-form-item>
       <el-form-item label="图片展示:">
          <div class="img-box">
            <el-image :preview-src-list="detail.imgList" :src="item" v-for="(item,index) in detail.imgList" :key="index" fit="contain" class="img"></el-image>
          </div>
       </el-form-item>
      <el-form-item label="处理状态:">
          <!-- {{detail.statusVal}} -->
          <el-select v-model="ruleForm.status" @change="popStatusChange">
            <el-option
              v-for="item in statusData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
       </el-form-item>
      <el-form-item label="协调结果:">
          {{detail.satisfyStatusVal}}
       </el-form-item>
      <el-form-item label="投诉时间:">
          {{detail.createDate}}
       </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')" style="padding:12px 100px;"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="pagination"
    >
    </el-pagination>
  </div>
</template>
<script>
import initPagin from '../mixins/index.js'
export default {
  mixins:[initPagin],
  data() {
    return {
      date: "",
      queryParams: {
        gridVal: "",
        groupVal: "",
        type: "",
        info: "",
        statusVal: "",
      },
      gridData: [
        {
          label: "全部",
          value: 0,
        },
        {
          label: "戴整治",
          value: 1,
        },
      ],
      statusData: [
        {
          label: "待处理",
          value: 1,
        },
        {
          label: "已完成",
          value: 2,
        },
      ],
      types: [
        {
          label: "全部",
          value: 0,
        },
        {
          label: "姓名",
          value: 1,
        },
        {
          label: "电话",
          value: 2,
        },
      ],
      loading: false,
      groupData: [],
      // 弹框
      title: "查看",
      dialogVisible: false,
      ruleForm: {
        status:''
      },
      // 详情
      detail:{
        userName:'',
        communityName:'',
        complaintContent:'',
        dealUserName:'',
        statusVal:'',
        imgList:[],
        satisfyStatusVal:'',
        createDate:''
      },
      time: new Date().getTime(),
    };
  },
  mounted() {
    this.getList();
    this.getAreaList(); // 获取小区
    // this.getSelectList(0, 1); // 获取微网格名、组名
  },
  methods: {
    // 搜索按钮操作
    handleQuery() {
      this.pageNum = 1;
      this.getList();
    },
    // 重置按钮操作
    resetQuery() {
       Object.keys(this.queryParams).forEach((key) => {
            this.queryParams[key] = "";
        });
        this.date = '';
    },
    // 获取列表
    getList() {
      this.loading = true;
      let params = {
        time: this.time,
        startTime: this.date ? this.date[0] : "",
        endTime: this.date ? this.date[1] : "",
        communityId: this.queryParams.groupVal,
        status: this.queryParams.type,
        queryMsg: this.queryParams.info,
        complaintStatus: this.queryParams.statusVal,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.complaint.list, {
          time: this.time,
          startTime: this.date ? this.date[0] : "",
          endTime: this.date ? this.date[1] : "",
          communityId: this.queryParams.groupVal,
          status: this.queryParams.type,
          queryMsg: this.queryParams.info,
          complaintStatus: this.queryParams.statusVal,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.loading = false;
          this.tableList = res.data.data;
          this.total = res.data.count;
        })
        .catch(() => {});
    },
    // 获取小区列表
    getAreaList() {
      let params = {
        time: this.time,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.region.selectLists, { 
          time: this.time,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.groupData = res.data.data;
        })
        .catch(() => {});
    },
    handleClose() {
      this.$refs["ruleForm"].resetFields();
      this.dialogVisible = false;
    },

    // 编辑
    handleUpdate(row) {
      this.dialogVisible = true;
      this.title = "详情";
      this.id = row.id;
      let params = {
        time:this.time,
        id:row.id
      }
      let result = this.$md5.transferValue(params);
      this.axios.post(this.stateUrl.complaint.detail,{
        time:this.time,
        id:row.id,
        sign: this.$md5.val(result),
      }).then(res=>{
        this.detail.userName = res.data.data.userName;
        this.detail.communityName = res.data.data.communityName;
        this.detail.complaintContent = res.data.data.complaintContent;
        this.detail.dealUserName = res.data.data.dealUserName;
        this.detail.imgList = res.data.data.imgPath.split(","),
        this.ruleForm.status = res.data.data.status;
        this.detail.satisfyStatusVal = res.data.data.satisfyStatusVal;
        this.detail.createDate = res.data.data.createDate;
      }).catch(()=>{

      })
    },
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            id: this.id,
            status:this.ruleForm.status,
            time: this.time,
          };
          let result = this.$md5.transferValue(params);
          this.axios
            .post(this.stateUrl.complaint.edit, {
              id: this.id,
              time: this.time,
              status:this.ruleForm.status,
              sign: this.$md5.val(result),
            })
            .then((res) => {
              this.msgSuccess("编辑成功");
              this.dialogVisible = false;
              this.getList();
            })
            .catch(() => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 删除按钮操作
    handleDelete(row) {
       let that = this;
      this.$confirm("是否确认删除?", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          that.delRole(row.id);
        })
        .catch(() => {});
    },
    // 删除
    delRole(id) {
      let params = {
        time: this.time,
        id,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.complaint.delete, {
          time: this.time,
          id,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.msgSuccess("删除成功");
          this.getList();
        })
        .catch(() => {});
    },
    // 选择小区
    areaChange(val) {
      this.queryParams.groupVal = val;
    },
    // 状态筛选
    statusChange(val) {
      this.queryParams.statusVal = val;
    },
    // 类型选择
    typeChange(val) {
      this.queryParams.type = val;
    },
    popStatusChange(val){
      this.ruleForm.status = val;
    },
  },
};
</script>
<style lang="less" scoped>
.img-box{
  display: flex;
}
.img-box .img{
  width:150px;
  height:100px;
  margin-right:10px;
}
.dialog-footer{
  text-align: center;
}
</style>